<template>
	<view class="page" v-cloak>
		<!-- 自定义头部start -->
		<!-- <fu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">商品详情</block>
		</fu-custom> -->
		<view class="cu-custom" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
			<view class="cu-bar fixed bg-white"
				:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<text class="content" :style="[{top:StatusBar + 'px'}]">商品详情</text>
				<!-- openPopup('share') -->
				<view class="flex flex-direction align-center justify-center" style="flex-shrink: 0;" @click="showKefu" v-if="is_show != 1">
					<!-- <image  src="https://localelife.chunchuangkeji.cn/h5img/images/share.png" class="fu-block-32"></image> -->
					<image  src="../../../../static/kefu.png" style="width: 40rpx;height: 40rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 自定义头部end -->
		<fu-loading  v-if="!isPageShow"></fu-loading>
		<block v-else>
			<!-- 轮播图start -->
			<view id="banners" class="relative" style="height: 700rpx;">
				<swiper class="w100" style="height: 700rpx;" :indicator-dots="false" :circular="true" @change="changeSwiper">
					<block v-for="(item, index) in swipers" :key="index">
						<!-- 增加了视频播放，暂时未对接接口 -->
						<block v-if="index == 0&& swiperVideo">
							<swiper-item>
								<view class="video-poster">
									<block v-if="!isPlay">
										<image :src="item" mode="scaleToFill" lazy-load></image>
										<view class="video-poster-circle" @click="playVideo">
											<view class="video-poster-mask"></view>
											<view class="cuIcon-playfill"></view>
										</view>
									</block>
									<block v-else>
										<video
											:src="swiperVideo"
											id="myVideo"
											style="width:750rpx;height:100%;"
											controls
											@fullscreenchange="fullscreenchange"
											@ended="videoEnd"
										></video>
									</block>
								</view>
							</swiper-item>
						</block>
						<!-- <block v-else>
							<swiper-item><image :src="item" mode="aspectFill" lazy-load @click="preview(item, swipers)"></image></swiper-item>
						</block> -->
						<block v-else>
						<swiper-item>
							<view class="w100" style="height: 700rpx;" @click="preview(item, swipers)">
								<fu-image :src="item" mode="scaleToFill"></fu-image>
							</view>
						</swiper-item>
						</block>
					</block>
				</swiper>
				<!-- <view class="pagination-left text-sm padding-lr-sm line-height-48 width-290  height-48 radius-48"
					v-if="horsRaceList.length>0">
					<swiper class="height-40" autoplay :vertical='true' :disable-touch='true' :circular='true'>
						<block v-for="(item, index) in horsRaceList" :key="index">
							<swiper-item>
								<view class="flex align-center">
									<image :src="item.head_img?item.head_img:'https://shengyuanadmin.hnshpjs.com/h5img/images/tab/logo.png'" mode=""
										style="width: 40rpx;height: 40rpx;border-radius: 40rpx;margin-right: 8rpx;"></image>
									<view class=" text-cut">
										{{item.user_nickname|nameFilter}}购买了此商品
									</view>
								</view>
			
							</swiper-item>
						</block>
					</swiper>
				</view> -->
				<view class="pagination text-sm text-center  line-height-40 width-80 height-40 radius-40">
					{{ curSwiper }}/{{ swipers.length }}
				</view>
			</view>
			<!-- 轮播图end -->
			<!-- 价格展示区start -->
			<view class="prices padding-lr text-white flex justify-between align-center">
				<!-- <image src="../../../../static/xiaoLogo.png" mode="" class="logoImg"></image> -->
				<view>
					<view>
						<text class="margin-left-sm fu-fs22" v-if="goodsInfo.market_price">
							<text >
								<text class="text-price fu-fs40" style="font-weight: 800;text-decoration: line-through;">{{ goodsInfo.market_price }}</text>
							</text>
						</text>
						<text class="kanNum">
							<text style="font-size: 28rpx;">优惠价</text>
							<text class="text-price" style="font-size: 36rpx;" v-if="goodsInfo.price"></text>
							<text>{{ goodsInfo.price }}</text>
						</text>
						
					</view>
					<!-- <view class="margin-top-4" v-if="Number(goodsInfo.share_award_money) || Number(goodsInfo.discounts)">
						<text class="text-sm">
							<block v-if="Number(goodsInfo.discounts)">
								{{i18n['下单返']}}{{goodsInfo.discounts}}
							</block>
							<block v-if="Number(goodsInfo.share_award_money)">
								<text class="margin-left-xs">{{i18n['转发赚']}}{{goodsInfo.share_award_money}}</text>
							</block>
						</text>
					</view> -->
				</view>
				<view class="flex align-end sale-box flex-direction">
					<view class="margin-left-sm text-sm font-26" style="color: #333;font-weight: 800;">
						<text>{{i18n['销量']}}</text>
						<text>{{ goodsInfo.sales_sum }}</text>
						<text>{{i18n['件']}}</text>
					</view>
					<view class="flex align-center margin-top-4 font-24" v-if="Number(goodsInfo.share_award_money)">
						<text>分享可得</text>
						<text class="text-bold" style="margin: 0 8rpx;">{{Number(goodsInfo.share_award_money) || 0}}</text>
						<image src="/static/jinbi.png" class="fu-block-24"></image>
					</view>
					<!-- <view class="" @tap="openPopup('share')">
						<view style="font-size: 36rpx;margin-left: 12rpx;" class="fu-iconfont">&#xe8b8;</view>
					</view> -->
				</view>
			</view>
			<!-- 价格展示区end -->
			<!-- 商品信息展示区start -->
			<view class="padding bg-white margin-24">
				<view class="flex justify-between align-start">
					<view class="flex flex-direction">
						<text class="text-lg text-333 word-break-all text-bold" style="font-weight:800">
							{{ goodsInfo.name }}
						</text>
					</view>
					<view class="flex">
						<!-- <view class="flex flex-direction align-center justify-center" style="flex-shrink: 0;margin-right: 12rpx;" @click="previewShareImage" v-if="is_show != 1">
							<image  src="../../../../static/3.png" class="fu-block-32"></image>
							<text class="text-333" style="font-size: 20rpx;margin-top: 6rpx;">保存图片</text>
						</view> -->
						<view class="flex flex-direction align-center justify-center" style="flex-shrink: 0;" @click="openPopup('share')" v-if="is_show != 1">
							<image  src="https://localelife.chunchuangkeji.cn/h5img/images/share.png" class="fu-block-32"></image>
							<text class="text-333" style="font-size: 20rpx;margin-top: 6rpx;">分享</text>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 10rpx;">
					<text style="font-size: 22rpx;color: #7c7d85;margin: 10rpx 0;" v-if="goodsInfo.goods_limit_txt">{{goodsInfo.goods_limit_txt}}</text>
					<view class="flex align-center">
						<!-- <view class="flex align-center margin-r-24 text-20">
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22" style="margin-right: 6rpx;"></image>
							<text class="text-666" v-if="!goodsInfo.is_appointment">无需预约</text>
							<text class="text-666" v-else>需要预约</text>
						</view> -->
						<view class="flex align-center margin-r-24 text-20" v-if="goodsInfo.is_point">
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22" style="margin-right: 6rpx;"></image>
							<text class="text-666">积分抵</text>
						</view>
					</view>
				</view>
				<view class="flex align-center" style="margin-top: 24rpx;font-size: 24rpx;" v-if="goodsInfo.is_goods_type == 1">
					<!-- <image src="https://localelife.chunchuangkeji.cn/h5img/images/006.png" style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"></image> -->
					<!-- <text class="text-666 kanjiaNum">{{goodsInfo.bargain}}人正在抢购</text>
					<text class="text-666" style="margin: 0 16rpx;">|</text> -->
					<text class="text-666 kanjiaNum" v-if="goodsInfo.stock">剩余{{goodsInfo.stock}}个</text>
					<text class="text-666 kanjiaNum" v-else>已抢光</text>
				</view>
				<!-- <fu-uni-countdown :seconds='countDownDate'></fu-uni-countdown> -->
				<view class="flex align-center justify-between" v-if="false">
					<view style="margin-top: 24rpx;font-size: 26rpx;font-weight: 800;">
						<text >剩余时间：</text>
						<benben-countdown class='kanjiaBox' :count-time="goodsInfo.today_remaining">
						    <template #default="{ d, h, i, s }">
						        <text class='kanjia-item'>{{h}}</text>
						
						        <text>:</text>
						
						        <text class='kanjia-item'>{{i}}</text>
						
						        <text>:</text>
						
						        <text class='kanjia-item'>{{s}}</text>
						
						        <text></text>
						    </template>
						</benben-countdown>
					</view>
					<view class="saveBtn"  @click="previewShareImage">
						<image src="../../../../static/save.png" mode=""></image>
						保存图片
					</view>
				</view>
				<!-- <image src="https://localelife.chunchuangkeji.cn/h5img/images/005.png" style="width: 100%;height: 80rpx;margin-top: 40rpx;" @click="showKefu"></image> -->
			</view>
			<!-- 商品信息展示区end -->
			<!-- 优惠券展示区start -->
			<!-- <view class="bg-white padding-lr-sm">
				<view class="padding-tb" @tap="switchCoupon" v-if="coupon_list.length > 0">
					<view class="flex justify-between">
						<view class="flex align-center">
							<view
								class="margin-right-sm discounts-info text-prices text-sm padding-lr-16 padding-top-4 padding-bottom-10"
								v-for="(item, index) in coupon_list" :key="index" v-if='index < 3'>
								{{i18n['满']}}{{ item.min_order_money   | filterPrice}}-{{ item.money  | filterPrice}}
							</view>
						</view>
						<view class="text-333 text-sm">
							<text class="">{{i18n['领券']}}</text>
							<text class="cuIcon-right text-999 margin-left-xs text-sm"></text>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 优惠券展示区end -->
			<!-- 规格,地址,服务,参数start -->
			<view class="margin-top-20 bg-white padding-lr-sm padding-tb margin-24">
				<!-- 商家信息 start -->
				<view class="flex align-center justify-between">
					<!-- <view class=" flex align-center fu-fs32 text-333 text-bold">商家信息</view> -->
					<view class="flex">
						<view class="shopName">{{ shop_info.store_name }}</view>
						<image src="../../../../static/d2.png" mode="" style="width: 45rpx;height: 45rpx;margin-left: 12rpx;"></image> 
					</view>
					<view class="margin-left flex align-center justify-center"
						 @tap="collect">
						<image v-if="shop_info.is_collection" class=" fu-block-32" :src="imgBaseUrl + 'collect-2.png'" />
						<image v-else class="fu-block-32" :src="imgBaseUrl + 'collect-1.png'" />
						<text class="text-sm text-333"
							:class="'fu-cred' && shop_info.is_collection " style="margin-left: 8rpx;">{{ shop_info.is_collection ? i18n['已收藏'] : i18n['收藏'] }}</text>
					</view>
				</view>
				<view class="merchant-info flex" @click="goMerchant(shop_info)">
					<!-- <image :src="shop_info.store_logo" mode="aspectFill" class="merchant-img"></image> -->
					<view class="merchant-text" style="color: #333;">
						<!-- <view class="store_name text-cut">{{ shop_info.store_name }}</view> -->
						<view class="time flex align-center">
							<view class="flex align-center" style="margin-right: 52rpx;">
								<image src="https://localelife.chunchuangkeji.cn/h5img/images/clock.png" class="icon flex-shrink"></image>
								<text class=" text-underline">{{shop_info.business_hours}}</text>
							</view>
							<view class="flex align-center flex-sub flex-shrink" @click.stop="callShow = true" style="padding-left: 52rpx;">
								<!-- <image src="https://localelife.chunchuangkeji.cn/h5img/images/tel.png" class="icon flex-shrink"></image> -->
								<image src="../../../../static/d1.png" class="icon flex-shrink"></image>
								<text class="" style="white-space: nowrap;">{{shop_info.service_phone}}</text>
							</view>
						</view>
						<view class="address  align-center" @click.stop="OpenNavigation(shop_info.lat, shop_info.lng, shop_info.company_address)">
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/addr-4.png" class="icon"></image>
							<text class=" addr">{{shop_info.company_address}}</text><br>
							<view style="flex-shrink: 0;margin-left: 40	rpx;">距您当前距离{{shop_info.juli}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商家信息 end -->
			<!-- 评价展示区start -->
			<view id="evaluates" class="margin-top-20 bg-white margin-24">
				<view class="flex justify-between align-center padding-lr-sm padding-tb ">
					<view class=" flex align-center fu-fs32 text-333 text-bold">
						{{i18n['商品评价']}}（{{ comment_total }}）
					</view>
					<view class="fu-fs24 flex align-center" @tap="navToComment">
						<view class="text-333" v-if="goodsInfo.praise_rate || goodsInfo.praise_rate == 0">
							{{ i18n['好评率']}}{{ goodsInfo.praise_rate + '%' }}
						</view>
						<text class="text-333" v-else>{{i18n['查看全部']}}</text>
						<!-- <text class="cuIcon-right text-999 margin-left-xs"></text> -->
					</view>
				</view>
				<view class="padding-lr" v-if="comment.length > 0">
					<block v-for="(item, index) in comment" :key="index">
						<fu-evaluate :prop="item"></fu-evaluate>
					</block>
				</view>
			</view>
			<!-- 评价展示区end -->
			<!-- 问答展示区 -->
			<!-- <view class="margin-top-10 bg-white padding-tb">
				<view class="flex justify-between align-center padding-lr-sm">
					<view class="title-block flex align-center fu-fs32 text-333 text-bold">
						{{i18n['问答']}}（{{ question_total }}）
					</view>
					<view class="fu-fs24" @tap="navToQuestionsAnswers">
						<text class="text-333">{{i18n['查看全部']}}</text>
						<text class="cuIcon-right text-999 margin-left-xs"></text>
					</view>
				</view>
				<view class="padding-lr-sm">
					<block v-for="(item, index) in question_list" :key="index">
						<fu-details-question-answers :item="item"></fu-details-question-answers>
					</block>
				</view>
			</view> -->
			<!-- 问答 end -->
			
			<!-- 菜单 start -->
			<view class="margin-top-20 bg-white padding-lr-sm padding-tb margin-24" v-if="goods_menu_list.length > 0">
				<view class=" flex align-center fu-fs32 text-333 text-bold">
					菜单
				</view>
				<block v-for="(item, index) in goods_menu_list" :key="index">
					<view class="flex align-center justify-between" style="margin-top: 24rpx;">
						<text class="name text-bold flex1 text-ellipsis" style="font-size: 30rpx;color: #333;">{{item.menu_name}}</text>
						<text class="text-price text-bold" style="font-size: 34rpx;color: #FF5C5C;flex-shrink: 0;">{{item.menu_price}}</text>
					</view>
					<view class="text-999 font-28 margin-top-16" style="white-space: pre-wrap;">{{item.menu_desc}}</view>
				</block>
			</view>
			<!-- 菜单 end -->
			<!-- 品牌介绍 start-->
			<view id="details" class="margin-top-20 bg-white padding-tb padding-lr-sm margin-24">
				<view class=" flex align-center fu-fs32 text-333 text-bold">品牌介绍</view>
				<!-- <jyf-parser :html="body"></jyf-parser> -->
				<view class="text-999 font-24 margin-top-16">{{goodsInfo.brand_desc}}</view>
			</view>
			<!-- 品牌介绍 end-->
			<!-- 购买须知start -->
			<view class="margin-top-20 bg-white padding-lr-sm padding-tb margin-24">
				<!-- title-block -->
				<view class=" flex align-center fu-fs32 text-333 text-bold">
					购买须知
				</view>
				<view class="tips flex align-center margin-top-24">
					<view class="tip flex align-center">
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22" style="margin-right: 6rpx;"></image>
						<text v-if="!goodsInfo.is_appointment">无需预约</text>
						<text v-else>需要预约</text>
					</view>
					<view class="tip flex align-center" v-if="goodsInfo.is_point">
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22" style="margin-right: 6rpx;"></image>
						<text>积分抵</text>
					</view>
				</view>
				<view class="">
					<view v-html="goodsInfo.warm_prompt" style="white-space: pre-wrap;"></view>
				</view>
			</view>
			<!-- 购买须知end -->
			<view id="details" class="margin-top-20 bg-white padding-tb padding-lr-sm margin-24">
				<view class=" flex align-center fu-fs32 text-333 text-bold">金币提现说明</view>
				<!-- <jyf-parser :html="body"></jyf-parser> -->
				<view class="text-999 font-24 margin-top-16">{{goodsInfo.gold_withdrawal_content}}</view>
			</view>
			<!-- 商品详情start -->
			<view id="details" class="margin-top-20 bg-white padding-tb padding-lr-sm margin-24">
				<view class=" flex align-center fu-fs32 text-333 text-bold">价格说明</view>
				<!-- <jyf-parser :html="body"></jyf-parser> -->
				<view class="sub-title">· 划线价格</view>
				<view class="text-999 font-24 margin-top-16">{{goodsInfo.market_price_content}}</view>
				<view class="sub-title">· 未划线价格</view>
				<view class="text-999 font-24 margin-top-16">{{goodsInfo.shop_price_content}}</view>
			</view>
			<!-- 更多套餐 start -->
			<view class="margin-top-20 bg-white padding-lr-sm padding-tb margin-24" v-if="guanlian_goods.length > 0">
				<view class=" flex align-center fu-fs32 text-333 text-bold">
					更多套餐
				</view>
				<view class="package-list">
					<view class="item flex" v-for="(item, index) in guanlian_goods" :key="index" v-if="packageShow ? item : index < 2" @click="handleJump" :data-url="`/pages/goods/goodsdetail/goods-detail/index?goods_id=${item.id}`">
						<image :src="item.thumb" mode="aspectFill" class="goods-img"></image>
						<view class="right flex flex-direction justify-between">
							<view>
								<view class="name">{{item.name}}</view>
								<view class="tips flex align-center margin-top-16">
									<view class="tip flex align-center">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22" style="margin-right: 6rpx;"></image>
										<text v-if="!item.is_appointment">无需预约</text>
										<text v-else>需要预约</text>
									</view>
									<view class="tip flex align-center" v-if="item.is_point">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22" style="margin-right: 6rpx;"></image>
										<text>积分抵</text>
									</view>
								</view>
							</view>
							<view class="price flex">
								<text class="text-price text-bold" style="color: #FF5C5C;font-size: 32rpx;margin-right: 16rpx;">{{item.shop_price}}</text>
								<text class="text-through text-999" style="font-size: 20rpx;">¥{{item.market_price}}</text>
							</view>
						</view>
					</view>
					<view class="chakan flex align-center justify-center" @click="showMore" v-if="guanlian_goods.length > 2">
						<text>{{packageShow ? '收起' : '查看更多'}}</text>
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/arrow-b-2.png" style="width: 20rpx;height: 10rpx;margin-left: 16rpx;" :class="{'arrow-t': packageShow}" ></image>
					</view>
				</view>
			</view>
			<!-- 更多套餐 end -->
			<!-- 商品详情end -->
			
			
			<view class="jindu-box  " v-if="sign_time>0">
				<progress :percent="percent" activeColor="#B82441" stroke-width="8" border-radius="4" />
				<view class="list-box">
					浏览<text style="color: #FFD816;">{{sign_time}}</text>秒 拿奖励
				</view>
			</view>
			<!-- 底部菜单start -->
			<view class="tools bg-white" v-if="!order_sn">
				<view class="toolbar flex height-108">
					<view class="flex-sub flex flex-direction justify-center" style="margin:20rpx 0 0 30rpx;" v-if="goodsInfo.is_goods_type == 1">
						<view class="text-bold text-333" style="font-size: 22rpx;">优惠价：<text class="text-price" style="color: #FF5C5C;font-size: 32rpx;">{{goodsInfo.price}}</text></view>
						<view class="text-bf" style="margin-top: 8rpx;font-size: 22rpx;">已减：<text class="text-through" style="font-size: 20rpx;">{{goodsInfo.bargain_price}}</text></view>
					</view>
					<view class="flex-sub flex align-center justify-center" v-else>
						<view class="text-bold text-333" style="font-size: 22rpx;">超值价：<text class="text-price" style="color: #FF5C5C;font-size: 32rpx;">{{goodsInfo.price}}</text></view>
					</view>
					<view class="flex align-center" style="font-size: 32rpx;" >
						<view class="text-white flex width-224 height-108 line-height-108 flex justify-center cu-btn"
							style="background: #FF6F27;" @click="openPopup('share')" v-if="goodsInfo.is_goods_type == 2">
							<text class="text-df">分享赚</text>
						</view>
						
						<view class="text-white  flex width-224 height-108 line-height-108 flex justify-center "
							style="background-color: #FD9CAE;" @tap="buyNow">
							<!-- <text class="text-sm"	v-if="goodsInfo.discounts > 0">{{i18n['返']}}{{goodsInfo.discounts}}</text> -->
							<text class="text-df">立即抢购</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部菜单end -->
		</block>
		<!-- 联系商家 -->
		<fu-popup mode="bottom" border-radius="16" v-model="callShow" :safe-area-inset-bottom="true" :mask-close-able="true">
			<view class="bg-white">
				<view class="flex align-center justify-center height-100">
					<image src="https://localelife.chunchuangkeji.cn/h5img/images/tel-2.png" class="fu-block-32 margin-right-24"></image>
					<text class="font-32">{{shop_info.service_phone}}</text>
				</view>
				<view style="height: 20rpx;background-color: #F8F8F8;"></view>
				<view class="text-center height-100 line-height-100 font-32" style="color: #FF6F27;" @click="call(shop_info.service_phone)">拨打</view>
			</view>
		</fu-popup>
		<!-- 平台客服弹窗 -->
		<fu-popup mode="center" border-radius="16" v-model="kefuShow" :safe-area-inset-bottom="true" :mask-close-able="true">
			<view class="service-box">
				<view class="service-head">
					<view></view>
					<view>联系客服</view>
					<image src="../../../../static/quit.png" mode="" class="quitStyle" @click="kefuShow = false"></image>
				</view>
				<view class="service-content">
					<view class="service-item">
						<view>客服微信：{{serviceData.wechat_id || ''}}</view>
						<view class="copyBtn" @click="copyData(serviceData.wechat_id)">复制</view>
					</view>
					<view class="service-item">
						<view>客服电话：{{serviceData.wechat_phone1 || ''}}</view>
						<view class="copyBtn" @click="makePhone(serviceData.wechat_phone1)">拨打</view>
					</view>
					<view class="service-item" v-if="serviceData.wechat_phone2">
						<view>客服电话：{{serviceData.wechat_phone2}}</view>
						<view class="copyBtn" @click="makePhone(serviceData.wechat_phone2)">拨打</view>
					</view>
					<view style="text-align: center;">
						<view>{{serviceData.time || ''}}</view>
						<image :src="serviceData.wechat_img" mode="" class="codeImgStyle"></image>
					</view>
				</view>
				
			</view>
		</fu-popup>
		
		<!-- 运费说明弹窗 -->
		<fu-explain :info="freight_explain" :title="i18n['运费说明']" ref="explain"></fu-explain>

		<fu-explain :info="warnTitle" :title="i18n['温馨提示']" ref="warn"></fu-explain>
		<!-- 优惠券弹窗 -->
		<fu-coupon ref="coupon" :info="coupon_list" @changeInfo="changeInfo"></fu-coupon>
		<!-- 地址弹窗 -->
		<fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address>
		<!-- 分享弹窗 -->
		<fu-share ref="share" :info="shareInfo" :shareImg='sharePath' @getPosterInfo="getShareCode"></fu-share>
		<!-- 规格弹窗 -->
		<fu-specs-popup ref="specs" :speclist="spec_list" :skulist="sku_list" :currentId="sku_id" :info="goodsInfo"
			:limit="limit" @changeNumber="setNumber" @changeSpec="setSpec" @addCart="addCart" @buyNow="buyNow">
		</fu-specs-popup>
		
			<l-painter ref="painter" isCanvasToTempFilePath @success="getPath" custom-style="position: fixed; left: 200%;"
			  css="width: 580rpx;position: relative;" v-if="goobsShow">
				<l-painter-image src="../../static/sharebg.png" css="width:580rpx;height:840rpx;position: absolute;left:0;top:40rpx" />
			  <l-painter-image :src="shareInfo.thumb" 
					css="width:520rpx;height:460rpx;border-radius:20rpx;object-fit:cover;position: absolute;left:30rpx;top:100rpx" />
				<l-painter-text :text="shareInfo.goodsName"
				  css="color: #000;width:400rpx; font-size: 28rpx;fontWeight: bold;line-clamp:1;position:absolute;left:60rpx;top:580rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; " />	
				<l-painter-text :text="'地址：'+shareInfo.address"
				  css=" color: #000;width:450rpx; font-size: 22rpx;line-clamp:1;position:absolute;left:60rpx;top:615rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; " />	
				<l-painter-image :src="shareInfo.avatar"
				 css="width:30rpx;height:30rpx;border-radius:40rpx;position:absolute;top:665rpx;left:50rpx;" />
				<l-painter-text :text="shareInfo.name"
				  css="width:100rpx;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;line-clamp:1;position:absolute;top:660rpx;left:100rpx;color: #000; font-size: 28rpx; fontWeight: bold;" />
				<l-painter-text :text="'客服在线时间：'+shareInfo.business_hours"
				  css="line-clamp:1;width:320rpx;position:absolute;top:660rpx;left:200rpx;color: #000; font-size: 24rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; " />
				<l-painter-text :text="'原价：￥'+shareInfo.market_price"
								css="font-size: 24rpx; display: inline-block; color:#fff;position:absolute;left:120rpx;top:710rpx;background-color: #6b6b6b;padding: 0 12rpx;border-radius:12rpx" />
				<l-painter-text :text="shareInfo.price"
					css="font-size: 56rpx; display: inline-block; line-height: 48rpx;color:#fff;position:absolute;left:160rpx;top:780rpx;fontWeight: bold;" />
				<l-painter-image :src="shareCode" css="width:120rpx;height:120rpx;position:absolute;left:410rpx;top:700rpx;" />
				<l-painter-text text="长按识别二维码进入"
				  css="font-size: 14rpx; display: inline-block; color:#333;position:absolute;left:410rpx;top:825rpx;" />
			  <l-painter-view css="width: 580rpx;height:924rpx;background-color:#fcdac1;border-radius:20rpx;"></l-painter-view> 
			</l-painter>
		
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	import richText from '@/common/utils/richText.js';
	import {
		SHAREURL
	} from '@/common/config.js';
	import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
	import fuDetailsQuestionAnswers from '../../components/fu-question-answers/fu-details-question-answers.vue';
	import fuExplain from '../../components/fu-explain/index.vue';
	import fuCoupon from '../../components/fu-coupon/index.vue';
	import fuGoodsAddress from '../../components/fu-goods-address/index.vue';
	import fuSpecsPopup from '../../components/fu-specs-popup/index.vue';
	import lPainter from '../../components/lime-painter/lime-painter/l-painter/l-painter.vue';
	import lPainterView from '../../components/lime-painter/lime-painter/l-painter-view/l-painter-view.vue';
	import lPainterImage from '../../components/lime-painter/lime-painter/l-painter-image/l-painter-image.vue';
	import lPainterText from '../../components/lime-painter/lime-painter/l-painter-text/l-painter-text.vue';
	export default {
		components: {
			fuEvaluate,
			fuDetailsQuestionAnswers,
			fuExplain,
			fuCoupon,
			fuGoodsAddress,
			fuSpecsPopup,
			lPainter,
			lPainterView,
			lPainterImage,
			lPainterText,
		},
		data() {
			return {
				goobsShow:false,
				swiperVideo: '',
				curSwiper: 1, // 当前轮播图index
				tabs: [{
						title: global.i18n['商品'],
						id: 'banners'
					},
					{
						title: '评价',
						id: 'evaluates'
					},
					{
						title: global.i18n['详情'],
						id: 'details'
					}
				],
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				curTab: 'banners',
				scrollTop: 0, // {Number} 滚动高度
				opacity: 0, //  {Number} 头部透明度
				swipers: [], // {Array.Object} 轮播图
				goodsInfo: {}, // {Object}商品信息
				spec_list: [], // {Array.Object}规格列表
				sku_list: [], // {Array.Object}规格参照列表
				sku_id: 0, // {String}当前规格id
				sku_name: '', //{String}当前规格名称
				goods_id: 0, //{Number}商品id
				cid: '', // {Number}分类id
				body: '', // {String}商品介绍
				comment: [], //{Array.Object}评论列表
				comment_total: 0, //{Number}评论条数
				question_list: [], // 问答列表
				question_total: 0, // 问答条数
				limit: 0, // {Number}限购数量
				addrs: [], // {Array.Object}地址列表
				curAddr: null, //{String}当前选择的地址
				shareCode: '', //{String}分享的图片路径
				shareUrl: '', //{String}分享的地址路径
				coupon_list: [], //{Array.Object}优惠券列表
				isPlay: false, //{Boolean}是否播放
				videoContext: null, //{Object}视频对象
				freight_explain: '', //{String} 运费说明
				explain_title: '', //{String}运费说明标题
				sale_top_name: '', //排行榜
				is_showTop: false, //是否是从支付成功通知的
				horsRaceList: [],
				isPageShow: false,
				activity_id: 0,
				invite_code: '',
				send_type: 0,
				shop_info: {},
				shop_id: '',
				sign_time: 0,
				percent: 0,
				timeSign: null,
				warnTitle: '',
				isShow: false,
				score: 0,
				coupon:[],
				callShow: false,
				kefuShow: false,
				type: '',
				packageShow: false,
				guanlian_goods: [],
				goods_menu_list: [],
				isCheck: false,
				order_sn:'',
				is_show:'0',
				sharePath:'',//海报地址
				countDownDate:0,
				serviceData:{},//客服信息
			};
		},
		onNavigationBarButtonTap() {
		    this.openPopup('share')
		  },
		filters: {
			filterMobile(val) {
				if (!val) return '';
				return val.substr(0, 3) + '****' + val.substr(-4);
			}
		},
		computed: {
			shareInfo() {
				return {
					goods_id: this.goods_id,
					sku_id: this.sku_id,
					goodsName: this.goodsInfo.name,
					goodsImage: this.swipers[0],
					thumb: this.goodsInfo.thumb,
					summary: this.goodsInfo.description,
					price: this.goodsInfo.price,
					market_price: this.goodsInfo.market_price,
					avatar: (this.userInfo && this.userInfo.head_img) || '',
					name: (this.userInfo && this.userInfo.user_name) || '',
					address: this.shop_info.company_address,
					business_hours: this.shop_info.business_hours,
					href: this.shareUrl || SHAREURL +
						`pages/goods-detail/index?goods_id=${this.goods_id}&sku_id=${this.sku_id || 0}&phone=${ this.userInfo &&this.userInfo._mobile || 0}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}&activity_id=${this.activity_id || 0}&type=goodsShare`, // H5地址
					code: this.shareCode ,// 二维码
					share_sign:this.goodsInfo.share_sign,
					is_appointment: this.goodsInfo.is_appointment,
					is_point: this.goodsInfo.is_point
				};
			},
			cartNumber() {
				return this.$store.getters.allNum;
			},
			//是否是会员
			isMember() {
				return this.$store.getters.isMember;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
			location() {
				return this.$store.getters.location;
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onLoad(options) {
			console.log(options, '========options');
			// #ifdef APP-PLUS
			this.is_show = 1
			this.getHiddenInterface()
			// #endif
			let {
				goods_id,
				sku_id = 0,
				scene,
				activity_id,
				invite_code,
				type,
				sign_time,
				task_id,
				share_sign,
				pageType,
				order_sn
			} = options;
			if (scene) {
				const params = decodeURIComponent(options.scene);
				params.split('&').forEach((item, index) => {					
					console.log(item)
					console.log(index)
					switch (index) {
						case 0:
							goods_id = item.split('=')[1];
							break;
						case 1:
							share_sign = item.split('=')[1];
							break;
						case 2: 
							invite_code = item.split('=')[1];
							break;
					}
				});
				type = 'share';
			}
			this.order_sn = order_sn||''
			this.task_id = task_id
			this.type = pageType
			if (sign_time) {
				this.sign_time = sign_time
				this.timeSign = setInterval(() => {
					this.sign_time--
					this.percent = 100 - (this.sign_time / sign_time) * 100
					if (this.sign_time == 0) {
						this.postGoodsTaskReward()
						clearInterval(this.timeSign)
					}
				}, 1000)


			}
			this.goods_id = goods_id;
			this.sku_id = sku_id || 0;
			this.activity_id = activity_id || 0;
			this.invite_code = invite_code || '';
			console.log('this.invite_code====',this.invite_code);
			this.share_sign = share_sign || ''
			
			if(this.share_sign){
				uni.setStorageSync('share_sign',this.share_sign)
			}
			
			console.log(this.share_sign)
			if (invite_code) {
				uni.setStorageSync('COMMONINVITECODESYNC', invite_code);
			}
			
			if (type) {
				this.openModel = 'share';
			}
			// 监听页面更新
			uni.$on('paySuccess', data => {
				this.loadData(false);
				this.is_showTop = true
			});
			this.location = this.$store.state.location;
			this.headHeight = Math.round(this.CustomBar + uni.upx2px(88 + 20));
			this.loadData(false);
			this.loadHorsRaceLamp();
			uni.$on('refreshAddress', data => {
				this.loadAddress();
			});
			// 问答更新
			uni.$on('updateAnswerArea', (res) => {
				// 更新删除
				this.question_list = this.question_list.filter(item => {
					return res.indexOf(item.id) === -1
				})
				// 更新数量
				this.question_total = this.question_total - res.length;
			})
			this.getShareCode()
			this.countDownDate = 100000 *1000
			console.log('time......0',this.countDownDate);
		},
		onUnload() {
			this.clearPolling();
			uni.$off('refreshAddress');
			clearInterval(this.timeSign)
		},
		filters: {
			filterPrice(price) {
				return parseFloat(price);
			}
		},
		onShow() {
			console.log(this.userInfo, this.invite_code, '0000000000000000000000000')
			if (global.token) {
				this.loadAddress();
				// this.getInfo();
			}
		},
		onHide() {
			this.clearPolling();
		},
		onPageScroll(e) {
			let top = Math.round(e.scrollTop);
			let tab1 = Math.round(this.tabs[1].top);
			let tab2 = Math.round(this.tabs[2].top);
			let CustomBar = Math.round(this.CustomBar);
			let navH = 115 + this.StatusBar;
			this.scrollTop = top;
			this.opacity = (top / CustomBar).toFixed(2);
			if (top >= 0 && top < tab1 - navH) {
				this.curTab = 'banners';
			} else if (top >= tab1 - navH && top < tab2 - navH) {
				this.curTab = 'evaluates';
			} else if (top >= tab2 - navH) {
				this.curTab = 'details';
			}
		},
		async onShareAppMessage(res) {
			let info = {
				title: '',
				path: '',
				imageUrl: ''
			};
			await this.$api.post(global.apiUrls.post6406d647c5828, {
				goods_id: this.goods_id,
				lng: this.location.longitude,
				lat: this.location.latitude,
			}).then(res => {
				if (res.data.code == 1) {
					info.title = `原价¥${this.goodsInfo.market_price},现价¥${this.goodsInfo.shop_price}!【${this.goodsInfo.name}】${this.shop_info.store_name}`
					info.path = `/pages/goods/goodsdetail/goods-detail/index?goods_id=${this.goods_id}&type=share&share_sign=${this.goodsInfo.share_sign}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
					// info.path = `/pages/goods/sharePages/sharePages?goods_id=${this.goods_id}&type=share&share_sign=${this.goodsInfo.share_sign}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}`
					info.imageUrl = this.goodsInfo.thumb
				} else {
					this.$message.info(res.data.msg)
					return false;
				}
			})
			// if (res.from == 'button') {
				
			// } else {
			// 	info.title = this.goodsInfo.name
			// 	info.path = `/pages/goods/goodsdetail/goods-detail/index?goods_id=${this.goods_id}&activity_id=${this.activity_id || 0}&sku_id=${this.sku_id}&invite_code=${this.userInfo &&this.userInfo.invite_code ? this.userInfo.invite_code : ''}&type=share&share_sign=${this.goodsInfo.share_sign}`
			// 	info.imageUrl = this.goodsInfo.thumb
			// }
			if (info.path) {
				return info;
			}
		},
		onShareTimeline() {
			return {
				title: this.goodsInfo.name,
				imageUrl: this.goodsInfo.thumb
			}
		},
		methods: {
			//拨打电话
			makePhone(num){
				uni.makePhoneCall({
					phoneNumber: num 
				});
			},
			/**
			 * @function
			 * @description 点击复制
			 */
			copyData(data) {
			  uni.setClipboardData({
			    data: data,
			    success: () => {
			      // 隐藏自带轻提示
			      uni.hideToast()
			      uni.showToast({
			        icon: 'none',
			        title: this.i18n['复制成功']
			      });
			    }
			  });
			},
			previewShareImage(){
				uni.showLoading()
				if(this.sharePath){
					uni.hideLoading()
					uni.previewImage({
						current: this.sharePath,
						urls: [this.sharePath]
					})
				}else{
					this.$message.info('图片加载中，请稍后~')
					uni.hideLoading()
				}
				
			},
			getPath(e) {
			  this.sharePath = e
			},
			// 上架隐藏
			getHiddenInterface(){
				this.$api.post(global.apiUrls.hiddenInterface,{code: 'is_show'}).then(res=>{
					if(res.data.code == 1){
						this.is_show = res.data.data
					}
				})
			},
			// postVerifyInviteCode(){
			// 	this.$api.post(global.apiUrls.postVerifyInviteCode,{
			// 		invite_code:this.share_sign
			// 	}).then(res => {
			// 		if (res.data.code == 1) {
			// 			this.$util.showModal({
			// 			  title: this.i18n['提示'],
			// 			  content: '恭喜您成为优圣1号的会员',
			// 			  confirmColor: this.$store.state.themeColor,
			// 			  success: (res) => {
			// 			    if (res.confirm) {
								
			// 			    }
			// 			  }
						
			// 			})
			// 		}else{
			// 			this.$message.info('该邀请码已失效')
			// 		}
			// 	}).catch(err => {})
			// },
			showKefu() {
				this.getBase()
				this.kefuShow = true
			},
			//客服信息
			getBase() {
				this.$api.post(global.apiUrls.getBase).then(res => {
					console.log('客服信息',res);
					if (res.data.code == 1) {
						this.serviceData = res.data.data
					}
				})
			},
			showMore() {
				this.packageShow = !this.packageShow
			},
			// 去店铺
			goMerchant(item) {
				this.$urouter.navigateTo({
					url: '/pages/goods/shop/shop/index',
					params: {
						partner_id: item.u_id
					}
				});
			},
			OpenNavigation(latitude,longitude,address) {
				var that = this;
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: address,
					success: function() {
						console.log('success');
					}
				});
			},
			call(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile,
					complete() {
						this.callShow = false
					}
				})
			},
			// 获取用户信息
			getInfo() {
				this.$api.post(global.apiUrls.postGetUserInfo).then(res => {
					if (res.data.code == 1) {
						if (res.data.data.lastid == 0 && this.invite_code) {
							this.$store.commit('logout');
							this.$store.dispatch('getCartList');
							setTimeout(() => {
								this.$util.actionAuth(() => {})
							}, 800)
						}
						this.$store.commit('updateUserInfo', res.data.data);
					}
				}).catch(err => {})
			},
			//获取任务奖励
			postGoodsTaskReward() {
				console.log('dddddfff')
				this.$api.post(global.apiUrls.goodsTaskReward, {
					task_id: this.task_id
				}).then(res => {
					if (res.data.code == 1) {
						this.score = res.data.data.score
						this.coupon = res.data.data.coupon
						this.isShow = true
						// if (this.score) {
						// 	this.isShow = true
						// } else {
						// 	this.isShow1 = true
						// }
						// this.$message.info(res.data.msg)
					}
				})
			},
			//获取商品跑马灯
			loadHorsRaceLamp() {
				this.$api.post(global.apiUrls.postHorseRaceLamp, {
					goods_id: this.goods_id
				}).then(res => {
					console.log("跑马灯: ", res);
					if (res.data.code == 1) {
						this.horsRaceList = res.data.data
					}
				})
			},
			/**
			 * @event
			 * @description  改变优惠券领取状态
			 * @param {Number} val - 是否领取
			 * @return {Boolean}
			 * */
			changeInfo(val) {
				this.coupon_list[val].is_receive = 1;
			},
			navToQuestionsAnswers() {
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/goods/ask-answer/ask-answer-list/index',
						params: {
							goods_id: this.goods_id,
							activity_id: this.activity_id || 0
						}
					});
				});
			},
			/**
			 * @event
			 * @description  播放视频监听
			 * */
			playVideo() {
				this.isPlay = true;
				let that = this;
				setTimeout(() => {
					// that.videoContext.requestFullScreen(0);
					that.videoContext.play();
				}, 200);
			},
			/**
			 * @event
			 * @description  视频结束监听
			 * */
			videoEnd(e) {
				this.videoContext.exitFullScreen();
				this.isPlay = false;
			},
			/**
			 * @event
			 * @description  视频全屏监听
			 * */
			fullscreenchange(e) {
				// 退出全屏时
				if (!e.detail.fullScreen) {
					this.isPlay = false;
					this.videoContext.pause();
				}
			},

			goRank() {
				this.$urouter.navigateTo({
					url: '/pages/rank/product-rank/rank-detail/index',
					params: {
						goods_id: this.goods_id,
						cid: this.cid
					}
				});
			},
			/**
			 * @event
			 * @description  获取跑马灯数据(暂时用不着)
			 * */
			getLamp() {
				this.timer = setInterval(this.polling, 6000);
				clearTimeout(this.outTimer);
			},
			/**
			 * @event
			 * @description  清除跑马灯轮(暂时用不着)
			 * */
			clearPolling() {
				clearInterval(this.timer);
				clearTimeout(this.outTimer);
			},
			polling() {
				this.outTimer = setTimeout(() => {
					this.lampInfo = null;
				}, 3000);
				this.$api
					.post(global.apiUrls.getGoodsLampList, {
						goods_id: this.goods_id
					})
					.then(res => {
						if (res.data.code == 1 && res.data.data) {
							this.lampInfo = res.data.data;
						}
					});
			},
			/**
			 * @event
			 * @description  弹出领取优惠券弹窗
			 * */
			switchCoupon() {
				this.$util.actionAuth(() => {
					this.openPopup('coupon');
				});
			},
			/**
			 * @event
			 * @description  点击图片放大
			 * @param {String} item 当前图片url
			 * @param {Array} urls 图片url
			 */
			preview(item, urls) {
				uni.previewImage({
					current: item,
					urls: urls
				});
			},
			// 返回
			back() {
				if (this.openModel == 'share') {
					uni.reLaunch({
						url: '/pages/tab/home/shopindex/index'
					});
				} else {
					uni.navigateBack();
				}
			},
			// 轮播图切换
			changeSwiper(e) {
				this.curSwiper = e.detail.current + 1;
				this.isPlay = false
			},
			/**
			 * @event
			 * @description 获取收货地址列表
			 * @return {Array}
			 */
			loadAddress() {
				this.$api.post(global.apiUrls.getUserAddressAddressList).then(res => {
					if (res.data.code == 1) {
						this.addrs = res.data.data;
					}
				});
			},
			/**
			 * @event
			 * @description tab栏切换
			 * @return {Array}
			 */
			changeTab(item) {
				let nowScrollTop = this.scrollTop;
				uni.createSelectorQuery().in(this).select('#' + item.id).boundingClientRect(pos => {
					let posTop = Math.round(pos.top);
					if (posTop == 0 && nowScrollTop != 0) return;
					this.$nextTick(() => {
						uni.pageScrollTo({
							duration: 200,
							scrollTop: posTop + nowScrollTop - 105 - this.StatusBar
						});
						setTimeout(() => {
							this.curTab = item.id;
						}, 200)
					})
				}).exec();
			},
			/**
			 * @event
			 * @description  点击打开弹窗
			 * @param {String} type
			 * @param {Array} param
			 */
			openPopup(type, param) {
					if (type == 'share') {
						if (this.goodsInfo.stock == 0) {
							this.$message.info('该商品已被抢光')
							return;
						}
						this.getShareCode();
					}
						this.$refs[type].open(param);
				
			},

			/**
			 * @event
			 * @description  打开温馨提示
			 */
			switchWarn() {
				this.openPopup('warn');
			},
			/**
			 * @event
			 * @description  获取商品详情
			 * @param {String} goods_id 商品id
			 * @param {Array} user_id 用户id
			 * @return {Object}
			 */
			loadData(isUpdata) {
				this.$api
					.post(global.apiUrls.getGoodsDetail, {
						goods_id: this.goods_id,
						user_id: (this.userInfo && this.userInfo.id) || 0,
						lat: this.location.latitude,
						lng: this.location.longitude,
						order_sn:this.order_sn
					})
					.then(res => {
						if (res.data.code == 1) {
							let data = res.data.data;
							if (!isUpdata) {
								this.swipers = data.images;
								
								
								if (data.video_img) {
								  this.swipers.unshift(data.video_img);
								  this.swiperVideo = data.video;
								}
								this.goodsInfo = {
									name: data.name,
									price: data.shop_price,
									market_price: data.market_price,
									discounts: data.discounts || 0.0,
									thumb: data.thumb,
									description: data.description,
									is_collect: data.is_collect,
									share_award_money: data.share_award_money || 0.0,
									number: 1,
									stock: data.stock || 0,
									totalStock: data.stock || 0,
									sales_sum: data.sales_sum,
									is_spec: data.is_spec,
									goods_label: data.goods_label,
									goods_label_activity: data.goods_label_activity,
									goods_label_service: data.goods_label_service,
									praise_rate: data.praise_rate,
									is_shipping: data.is_shipping,
									member_price: data.member_price,
									shop_price: data.shop_price,
									adslogan: data.adslogan,
									share_sign:data.share_sign,
									bargain: data.bargain,
									bargain_price: data.bargain_price,
									is_bargain: data.is_bargain,
									click: data.click,
									warm_prompt: data.warm_prompt,
									market_price_content: data.market_price_content,
									shop_price_content: data.shop_price_content,
									is_goods_type: data.is_goods_type,
									is_appointment: data.is_appointment,
									is_point: data.is_point,
									goods_limit_txt: data.goods_limit_txt,
									gold_withdrawal_content: data.gold_withdrawal_content,
									id:data.id || '',
									brand_desc:data.brand_desc,
									today_remaining:data.today_remaining || 0
								};
								if (data.freight_explain) {
									this.freight_explain = data.freight_explain.replace(/\n/g, '<br/>');
								}
								this.guanlian_goods = data.guanlian_goods || [];
								this.goods_menu_list = data.goods_menu_list || [];
								this.warnTitle = data.warm_prompt
								this.explain_title = data.freight_name;
								this.coupon_list = data.coupon_list || [];
								this.cid = data.cid;
								this.shop_info = data.shop_info || {};
								this.shop_id = data.shop_info.u_id;
								this.sale_top_name = data.sale_top_name;
								this.totalStock = data.stock;
								this.limit = data.limit || 0;
								this.body = richText.format(data.body);
								this.comment = data.comment || [];
								this.comment_total = data.comment_total || 0;
								this.question_total = data.question_total || 0;
								this.question_list = data.question_list || [];
								this.send_type = data.send_type;
								if (data.is_spec == 1) {
									this.spec_list = data.spec_list.filter(item => item.spec_value.length != 0);
									this.sku_list = Object.values(data.sku_list).map(item => {
										item.sku_spec = item.key.split('_');
										return item;
									});
								}
								this.goobsShow = true
								this.$forceUpdate();
								this.isPageShow = true;
								uni.stopPullDownRefresh();
								this.$nextTick(() => {
									if (data.is_spec == 1) {
										setTimeout(() => {
											this.$refs.specs.init();
										}, 100);
									}
								});
								if (!this.is_showTop) {
									setTimeout(() => {
										this.computedPosTop();
									}, 500);
								}

							}
							// onshow时只更新评论与问答
							if (isUpdata) {
								this.comment = data.comment || [];
								this.comment_total = data.comment_total || 0;
								this.question_total = data.question_total || 0;
								this.question_list = data.question_list || [];
								this.coupon_list = data.coupon_list
								this.goodsInfo.is_collect = data.is_collect
								this.coupon_list = data.coupon_list
								this.goodsInfo.is_collect = data.is_collect
								this.$store.dispatch('getCartList');
							}
						} else {
							uni.navigateBack();
							setTimeout(() => {
								this.$message.info(this.i18n['获取详情失败']);
							}, 300);
						}
					});
			},
			/**
			 * @event
			 * @description  计算锚点位置
			 */
			computedPosTop() {
				const query = uni.createSelectorQuery().in(this);
				this.tabs.forEach((item, index) => {
					query
						.select('#' + item.id)
						.boundingClientRect(data => {
							this.$set(this.tabs[index], 'top', data.top);
						})
						.exec();
				});
			},
			/**
			 * @event
			 * @description  收藏
			 * @param {String} collect_id 商品id
			 * @param {Array} sku_id 规格id
			 * @param {Array} collect_title 商品名称
			 * @param {Array} type 类型
			 * @return {Object}
			 */
			collect() {
				this.$util.actionAuth(() => {
					this.$api
						.post(global.apiUrls.postUserAddonsSetCollection, {
							collect_id: this.shop_id,
							type: 4
						})
						.then(res => {
							if (res.data.code == 1) {
								if (this.shop_info.is_collection) {
									this.shop_info.is_collection = 0;
								} else {
									this.shop_info.is_collection = 1;
								}
								uni.$emit('updateMyFavoritesList')
								this.$message.info(res.data.msg);
							}
						});
				});
			},
			/**
			 * @event
			 * @description  修改购买数量
			 * @return {String}
			 */
			setNumber(num) {
				this.goodsInfo.number = num;
			},
			/**
			 * @event
			 * @description  修改购买规格
			 * @param {Object} skuInfo
			 * @return {Object}
			 */
			setSpec(skuInfo) {
				const {
					key_name,
					shop_price,
					market_price,
					sku_id,
					stock,
					member_price,
					thumb
				} = skuInfo;
				this.sku_id = sku_id;
				this.sku_name = key_name;
				this.goodsInfo.price = shop_price;
				this.goodsInfo.market_price = market_price;
				this.goodsInfo.member_price = member_price;
				this.goodsInfo.stock = stock;
				thumb && (this.goodsInfo.thumb = thumb);
				this.goodsInfo.shop_price = shop_price;
			},
			// 抢购
			kanjia() {
				if (this.goodsInfo.stock == 0) {
					// this.$message.info('该商品暂无库存')
					return;
				}
				this.$api.post(global.apiUrls.post64031a6b88f68, {
					goods_id: this.goods_id
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.info(`恭喜已成功砍掉${res.data.data.bargain_price}元，喜欢尽快下单吧!`)
						this.loadData(false);
						this.goodsInfo.price = res.data.data.shop_price
						this.goodsInfo.bargain++
						uni.$emit('updataShopInfo',this.goodsInfo)
						uni.$emit('updateHomeStatus', this.goods_id)
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			/**
			 * @event
			 * @description  立即购买
			 * @param {Number} goods_id 商品id
			 * @param {String} number 商品数量
			 * @param {String} type 类型
			 */
			buyNow() {
				if (this.isCheck) return
				this.$util.actionAuth(() => {

					// if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品暂无库存']);
					let data = {
						type: 'buy',
						goods_id: this.goods_id,
						number: this.goodsInfo.number,
						is_goods_type: this.goodsInfo.is_goods_type,
						warm_prompt: this.goodsInfo.warm_prompt,
						is_appointment: this.goodsInfo.is_appointment,
						is_point: this.goodsInfo.is_point
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					if (this.curAddr) {
						data.address_id = this.curAddr.address_id;
					}
					
					if(this.share_sign){
						data.share_sign = this.share_sign;
					}
					this.isCheck = true
					this.$api.post(global.apiUrls.postBuyNowOrderInfo, {
						goods_id: this.goods_id,
						number: this.goodsInfo.number,
						isSelect_integral_reduce: 0
					}).then(res => {
						if (res.data.code == 1) {
							this.$urouter.navigateTo({
								url: '/pages/order/order-process/confirm-order/index',
								params: data
							});
						} else {
							this.$message.info(res.data.msg)
						}
					})
					setTimeout(() => {
						this.isCheck = false
					}, 1000)

				});
			},
			/**
			 * @event
			 * @description  加入购物车
			 * @param {Number} goods_id 商品id
			 * @param {Number} num 商品数量
			 * @return {Object}
			 */
			addCart() {
				this.$util.actionAuth(() => {
					const data = {
						num: this.goodsInfo.number,
						goods_id: this.goods_id
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					this.$api.post(global.apiUrls.postGoodsAddToCart, data).then(res => {
						if (res.data.code == 1) {
							this.$message.info(this.i18n['加入购物车成功']);
							this.$store.dispatch('getCartList');
							console.log('cartNumber', this.cartNumber)
							uni.$emit('updateCart');
						} else {
							this.$message.info(res.data.msg);
						}
					});
				});
			},
			/**
			 * @event
			 * @description  选择地址
			 */
			switchAddress() {
				this.$util.actionAuth(() => {
					this.openPopup('address');
				});
			},
			/**
			 * @event
			 * @description  打开运费弹窗
			 */
			switchFreight() {
				this.openPopup('explain');
			},
			/**
			 * @event
			 * @description  去评价列表
			 * @param {Number} goods_id 商品id
			 */
			navToComment() {
				if (this.comment_total == 0) return this.$message.info(this.i18n['该商品暂无评论']);
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-comment/index',
					params: {
						goods_id: this.goods_id
					}
				});
			},
			/**
			 * @event
			 * @description  改变收货地址
			 */
			changeAddress(e) {
				this.curAddr = e;
				this.$refs.address.close();
			},
			/**
			 * @event
			 * @description 去购物车
			 */
			navToCart() {
				this.$urouter.switchTab('/pages/tab/cart/cart-page/index');
			},
			/**
			 * @event
			 * @description  客服
			 */
			navToServer() {
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/service-message/service/service-detail/index',
						params: {
							kid: '47',
							goods_id: this.goods_id,
							activity_id: this.activity_id || 0
						}
					});
				});
			},
			/**
			 * @event
			 * @description  获取二维码
			 * @param {Number} goods_id 商品id
			 * @param {Number} activity_id 活动id
			 * @param {Number} sku_id 规格id
			 */
			getShareCode() { 
				// #ifdef MP-WEIXIN
				let data = {
					a: this.goods_id,
					// b: this.activity_id || 0,
					// c: this.sku_id || 0,
					e: this.goodsInfo && this.goodsInfo.share_sign || '',
					d: this.userInfo && this.userInfo.invite_code || ''
				};
				let dataStr = this.$util.serialize(data);
				let page = 'pages/goods/goodsdetail/goods-detail/index';
				this.$api
					.post(global.apiUrls.postShareCode, {
						page: page,
						scene: dataStr,
						width: 180
					})
					.then(res => {
						if (res.data.code == 1) {
							let data = res.data.data.base64;
							this.shareCode = data;
							// this.$util
							//   .base64ToPath(data)
							//   .then(res => {
							//     this.shareCode = res;
							this.$refs.share.init();
							//   })
							//   .catch(err => {
							//     this.$message.info(this.i18n['保存临时二维码失败']);
							//   });
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {});
				// #endif
				// #ifndef MP-WEIXIN
				this.$api
					.post(global.apiUrls.postAppShareCode, {
						goods_id: this.goods_id,
						activity_id: this.activity_id || 0,
						sku_id: this.sku_id || 0
					})
					.then(res => {
						console.log(res, 'postAppShareCode - res')
						let data = res.data;
						if (data.code == 1) {
							let url = data.data.qrcode_url;
							let href = data.data.url;
							this.shareCode = url;
							this.shareUrl = href;
							this.$refs.share.init();
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {});
				// #endif
			}
		},
		onPullDownRefresh() {
			this.loadData(false);
			this.$refs.guess && this.$refs.guess.refresh();

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(e) {
			this.$refs.guess && this.$refs.guess.loadData();
		}
	};
</script>

<style lang="scss" scoped>
	.kanNum{
		color: #333;
		font-size: 38rpx;
		font-weight: 800;
		padding: 0 12rpx;
		margin-left: 12rpx;
		border-radius: 28rpx;
		background: #fae7d0;
	}
	.saveBtn{
		color: #fff;
		padding: 2rpx 8rpx;
		font-size: 24rpx;
		font-weight: 800;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		background-color: #565b6f;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 4rpx;
		}
	}
	.shopName{
		color:#333;
		font-size:38rpx;
		padding:0 12rpx;
		font-weight: 600;
		background:linear-gradient(90deg,#e9cc9b,#ffffff,#e9cc9b);
	}
	.kanjiaNum{
		color: #ff5c02;
		font-size: 24rpx;
		font-weight: 800;
		padding: 0 4rpx;
		background: #ffeee5;
	}
	.margin-24{
		margin: 0 24rpx;
		border-radius: 18rpx;
		position: relative;
		top: -48rpx;
	}
	button {
		background: transparent;
		padding: 0;
		margin: 0;

		&:after {
			border: none;
		}

		.margin-top-xs {
			margin-top: 0;
			height: 44rpx;
		}
	}
	.kanjiaBox{
		font-size: 30rpx;
	}
	.kanjia-item{
		color: #fff;
		padding: 4rpx;
		font-size: 30rpx;
		margin:0 6rpx;
		border-radius: 12rpx;
		background-color: #ff6f27;
	}
	.fu-block-22 {
		width: 22rpx;
		height: 22rpx;
	}
	.margin-r-24 {
		margin-right: 24rpx;
	}
	.text-20 {
		font-size: 20rpx;
	}
	.no-bg {
		background-color: #999 !important;
	}
	.service-box{
		width: 600rpx;
		height: 800rpx;
		padding: 32rpx;
		border-radius: 38rpx;
		background: linear-gradient(#fef0ed,#ffffff);
		.service-head{
			color: #333;
			font-size: 32rpx;
			font-weight: 600;
			padding-bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
		}
		.quitStyle{
			width: 35rpx;
			height: 35rpx;
		}
		.service-content{
			padding: 24rpx 0;
			font-size: 28rpx;
			.service-item{
				display: flex;
				justify-content: space-between;
				padding: 12rpx 24rpx;
			}
		}
		.copyBtn{
			color: #ef8768;
			padding: 0 12rpx;
			border-radius: 8rpx;
			border: 1rpx solid #ef8768;
		}
		.codeImgStyle{
			width: 360rpx;
			height: 360rpx;
		}
	}
	.page {
		min-height: 100%;
		padding-bottom: 132rpx;
		padding-bottom: calc(132rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(132rpx + env(safe-area-inset-bottom));

		.video-poster {
			height: 100%;
			position: relative;
			font-size: 40rpx;
			color: #ffffff;
			
			image{
				width: 100%;
				height: 100%;
			}

			#myVideo {
				width: 750rpx;
				height: 100%;
			}

			.video-poster-circle {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1rpx solid #ffffff;
				z-index: 99;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;

				.video-poster-mask {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.5);
					z-index: -1;
				}
			}
		}

		.pagination-left {
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			left: 32rpx;
			top: 109rpx;
			color: rgba(255, 255, 255, 0.8);
		}

		.pagination {
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			right: 32rpx;
			bottom: 32rpx;
			color: rgba(255, 255, 255, 0.8);
		}

		.prices {
			height: 160rpx;
			position: relative;
			margin: 24rpx 24rpx 0 24rpx;
			border-radius: 18rpx;
			background-image: url($IMG_BASE_URL + 'prices-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.logoImg{
				width: 35rpx;
				height: 35rpx;
				position: absolute;
				top:24rpx;
				left: 24rpx;
			}
			.sale-box {
				position: relative;
				color: rgba(255, 255, 255, 0.8);

				&::before {
					content: '';
					position: absolute;
					width: 1rpx;
					height: 24rpx;
					display: inline-block;
					background: rgba(255, 255, 255, 0.4);
					opacity: 0.6;
					left: -24rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.discounts-info {
			// background-image: url($IMG_BASE_URL + 'goods/detail_coupon_bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.tools {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 999;

			.toolbar {
				.tag {
					position: absolute;
					top: -10rpx;
					right: -18rpx;
					background: $bgtheme;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					font-size: 20rpx;
					color: #ffffff;
					line-height: 36rpx;
					text-align: center;
				}
			}
		}
	}

	.tabs {
		width: 100%;
		pointer-events: all;

		.tab-item {
			border-bottom: 4rpx solid white;

			&.active {
				border-bottom-color: $theme;
			}
		}
	}

	.evaluates {
		.title {
			height: 100rpx;

			.title-color::before {
				left: -4rpx;
				top: 10rpx;
			}
		}
	}

	.merchant-info {
		padding: 26rpx 0 0;
		.merchant-img {
			width: 124rpx;
			height: 124rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			flex-shrink: 0;
		}
		.merchant-text {
			flex: 1;
			overflow: hidden;
			.store_name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
			.time {
				margin-top: 10rpx;
				font-size: 24rpx;
				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 16rpx;
				}
				view {
					&:first-of-type {
						margin-right: 104rpx;
					}
				}
			}
			.address {
				padding-top: 14rpx;
				font-size: 24rpx;
				overflow: hidden;
				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 16rpx;
					flex-shrink: 0;
				}
				.addr {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	/deep/ .uni-numbox__minus {
		background: #fff;
	}

	/deep/ .uni-numbox__plus {
		background: #fff;
	}

	/deep/ .uni-numbox__value {
		background: #F7F7F7;
	}

	.jindu-box {
		width: 112rpx;
		position: fixed;
		right: 0;
		top: 1063rpx;

		.list-box {
			// width: 96rpx;
			padding: 0 2rpx;
			height: 72rpx;
			background: #343434;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
			opacity: 1;
			color: #ffffff;
			font-size: 20rpx;
			text-align: center;
			margin-left: 8rpx;
		}
	}


	.title2 {
		width: 150rpx;
		min-width: 150rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.list-item {
		height: 88rpx;
		line-height: 88rpx;
		display: flex;

		.title {
			width: 100rpx;
			min-width: 100rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}

		.content {
			flex: 1;
			display: flex;
			justify-content: space-between;
			overflow: hidden;

			.mes {
				flex: 1;
				position: relative;
			}

			.icon {
				/* width: 50rpx;
	    min-width: 50rpx; */
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.coupon-icon {
				width: 30rpx;
				min-width: 30rpx;
			}

			.freight-text {
				text-align: right;
			}
		}
	}
	.sure-box{
		width: 600rpx;
		height: 680rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		opacity: 1;
		padding: 32rpx;
	}
	.close{
		position: absolute;
		right: 32rpx;
	}
	.btn{
		width: 252rpx;
		height: 88rpx;
		background: #F1F1F1;
		border-radius: 8rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		margin-top: 80rpx;
	}
	.package-list {
		.item {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #eee;
			.goods-img {
				width: 147rpx;
				height: 147rpx;
				border-radius: 8rpx;
				flex-shrink: 0;
				margin-right: 16rpx;
			}
			.right {
				flex: 1;
				overflow: hidden;
				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price {
					align-items: baseline;
				}
			}
		}
		.chakan {
			font-size: 24rpx;
			color: #59A6F4;
			padding-top: 40rpx;
		}
	}
	.tips {
		.tip {
			margin-right: 24rpx;
			font-size: 20rpx;
			color: #666;
		}
	}
	.sub-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-top: 24rpx;
	}
	.kefu {
		padding: 64rpx 80rpx;
		position: relative;
		.close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.cu-btn {
		border-radius: 0;
		&::after {
			display: none;
		}
	}
	.arrow-t {
		transform: rotateX(180deg);
	}
</style>
